
<template>
	<view style="display: flex;justify-content: center;background-color: #FFFFFF;padding-bottom: 100rpx;">
		<view class="Infoboxform" v-if="isfinsh">
			<view class="textblock font32">报修单号：{{data.info.order_id}}
				<text v-if="data.info.status == '6'">已完成</text>
				<text v-if="data.info.status == '4'">进行中</text>
				<text v-if="data.info.status == '1'">待受理</text>
				<text v-if="data.info.status == '0'">未受理</text>
				<text v-if="data.info.status == '2'">指派中</text>
				<text v-if="data.info.status == '3'">进行中</text>
				<text v-if="data.info.status == '5'">待确认</text>
			</view>
			<view class="textblock ">联系人：<text class="c66">{{data.info.user_name}}</text></view>
			<view class="textblock ">联系电话：<text class="c66">{{data.info.user_mobile}}</text></view>
			<view class="textblock ">报修地址：<text class="c66">{{data.info.address}}</text>
				<text style="color: #007AFF;" @click="moveTo" class="ml30">导航</text>
			</view>
			<view class="textblock " style="display: inline-block;">维修时间：
				<view class="c66" style="display: inline-block;">{{data.info.est_start_time}}
					<view style="display: table-cell;" class="c66">{{data.info.est_end_time}}</view>
				</view>
			</view>
			<view class="textblock " style="padding: 15rpx 0;" v-if="data.worker.length">
				<text class="cell-left">
					上门师傅：
				</text>
				<view class="user" style="margin-left: 25%;margin-top: 10rpx;" v-for="(item,index) in data.worker">
					<image :src="item.avatar" class="userimg"></image>
					<view class="userinfo">
						<text class="name" @click="callphone(item.phone)">
							{{item.nickname || '无'}}
							<text class="startmun">{{item.start}}.0</text>
							<text class="starticon" :class="'starticon'+item.start"></text>
							<text class="iconfont cmain ml30 phone">&#xe8b8;</text>
						</text>
						<text class="priceone">工时费：{{item.unit_price ||0.00}}元/小时</text>
						<text class="pricetwo">上门费：已付{{item.first_pay_price || 0.00}}元</text>
					</view>
				</view>
			</view>
			<view class="textblock ">问题描述：<text class="c66">{{data.info.mark || '无'}}</text></view>
			<view class="textblock " v-if="data.info.images.length">报修图片：
				<view style="display: flex;justify-content: flex-start;align-items: flex-start;">
					<image @click="lookimg(item,1)" :src="item" style="width: 120rpx;height: 120rpx;"
						v-for="(item,index) in data.info.images" :key="index" class="ml20"></image>
				</view>
			</view>
			<view class="textblock " v-if="data.info.video">报修视频：
				<video :src="data.info.video" controls></video>
			</view>
			<view class="textblock " v-if="data.info.confirm_images.length">确认图片：
				<view style="display: flex;justify-content: flex-start;align-items: flex-start;">
					<image @click="lookimg(item,2)" :src="item" style="width: 120rpx;height: 120rpx;"
						v-for="(item,index) in data.info.confirm_images" :key="index" class="ml20"></image>
				</view>
			</view>
			<view class="textblock ">维修耗时：<text class="c66">{{(data.info.work_time / 1000/60).toFixed(2) }}分钟</text>
			</view>
			<view class="textblock ">维修费用：<text class="c66">{{data.info.work_price}}元</text></view>
			<view class="textblock " v-if="data.info.status == 5 || data.info.status == 6">享受折扣：<text
					class="c66">{{data.info.discount}}折</text></view>
			<view class="textblock flex" style="padding:0 0 30rpx 0;">
				<view class="cell-left">
					零配件：
				</view>
				<view class="part">
					<view class="item-box" v-for="(item,index) in data.parts" :key="index">
						<image :src="item.images" class="userimg"></image>
						<view class="userinfo">
							<text class="name">{{item.goods_name}} <text></text> </text>
							<text class="priceone">工时费<text class="s-money">￥ {{item.price}}</text></text>
							<text class="count">x{{item.num}}</text>
						</view>
					</view>
					<text class="price2">小计：<text class="money">￥{{dealpj(data.parts)|| 0}}</text> </text>
				</view>
			</view>
			<view class="textblock flex" style="padding:0 0 30rpx 0;">
				<view class="cell-left">
					其他配件：
				</view>
				<view class="o-part">
					<view class="item-box" v-for="(item,index) in data.other_parts" :key="index">
						<view class="userinfo">
							<text class="name">{{item.goods_name}} <text></text> </text>
							<text class="priceone">单价:<text class="s-money">￥ {{item.price}}</text></text>
							<text class="count">x{{item.num}}</text>
						</view>
					</view>
					<text class="price2">小计：<text class="money">￥{{dealpj(data.other_parts,1) || 0}}</text> </text>

				</view>
			</view>
			<view class="textblock ">其他费用：<text class="c66" style="float: right;"> <text
						class="money">￥{{data.info.other_fees || 0}}</text> </text></view>
			<view class="textblock ">费用描述：<text class="c66" style="float: right;">{{data.info.other_explain || '暂无'}}</text></view>
			<view class="textblock">
				工作费用：
				<text class="price2" style="float: right;"><text
						class="money">￥{{data.info.work_to_price|| 0.00}}</text> </text>
			</view>
			<view class="textblock" >
				上门费用：
				<text class="price2" style="float: right;"><text
						class="money">￥{{data.info.expect_balance_price|| 0.00}}</text> </text>
			</view>
			<view class="finall" style="text-align: right;">
				总费用: <text class="money ml20">￥{{data.info.order_balance }} 元</text>
			</view>
			<view class="mt30" v-if="data.info.status != '6'">
				<button class=" bmain cff" style="border-radius: 50rpx;" @click="payOrder"
					v-if="data.info.status == 5 ">确认支付</button>
			</view>
			<view style="height: 150rpx;"></view>
		</view>

	</view>
</template>

<script>
	import {
		orderDetial,
		payOrder
	} from '../../api/api.js'
	export default {
		data() {
			return {
				id: "",
				data: {},
				isfinsh: false
			}
		},
		onLoad(opt) {
			this.id = opt.id
			console.log('233232', opt, this.id)
			this.datainit()
		},


		methods: {
			// 拨打电话
			callphone(e) {
				if (!e) {
					uni.showToast({
						title: '获取电话失败！',
						icon: 'none'
					})
					return;
				}
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			// 调用导航
			moveTo() {
				// 使用微信内置地图查看位置
				wx.openLocation({
					'latitude': Number(this.data.info.lat),
					'longitude': Number(this.data.info.lng),
					scale: 28,
					name: this.data.info.address, //打开后显示的地址名称
				})
			},
			// 查看图片
			lookimg(e, type) {
				let path = ''
				if (type == 1) {
					path = this.data.info.images
				}
				if (type == 2) {
					path = this.data.info.confirm_images
				}
				wx.previewImage({
					current: e, // 当前显示图片的http链接
					urls: path // 需要预览的图片http链接列表
				})
			},
			/**
			 * 支付订单
			 */
			payOrder() {
				let data = {
					id: this.id
				}
				payOrder(data).then(res => {
					let data = res.data.result.jsConfig
					uni.requestPayment({
						appId: data.appId,
						timeStamp: data.timestamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							// 支付成功的回调中 创建绘本馆成功
							// if (res.status == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
							uni.redirectTo({
								url: `/pages/index/index?tab=2`
							})
							// }


						},
						fail: function(err) {
							console.log('取消', err)
							uni.showToast({
								title: '支付取消',
								duration: 1500,
								icon: 'none'
							});

							// that.$api.msg('支付取消', 1000);
						}
					})
				})

			},
			// 计算配件总额
			dealpj(obj, e) {

				console.log('处理的谁', obj, e)
				let money = 0
				obj.forEach(item => {
					money += item.price * item.num
				})
				return money



			},
			// 初始化
			datainit() {
				this.isfinsh = false
				let data = {
					id: this.id
				}
				orderDetial(data).then(res => {
					this.data = res.data
					this.isfinsh = true
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.Infoboxform {
		display: block;
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
		padding-bottom: 60rpx;
		width: 80%;
		height: 100%;
		// height: auto;
		// height: 110%;
		margin-top: 50rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.2);
		// margin-bottom: 90rpx;

		.finall {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 66rpx;
			color: #333333;
		}

		.textblock {
			position: relative;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 66rpx;
			color: #333333;
			border-bottom: 2rpx #F7F5F6 solid;

			.part {
				// display: flex;
				width: 75%;
				margin-left: 25%;
				padding: 0;

				.price2 {
					font-size: 24rpx;
					// font-weight: 400;
					line-height: 30rpx;
					color: #666666;
					text-align: end;
					width: 100%;
					display: block;
					margin-top: 20rpx;
					margin-right: 30rpx;
				}

				.item-box {
					height: 80rpx;
					position: relative;
					width: 100%;
					margin-top: 30rpx;

					.count {
						position: absolute;
						bottom: 0;
						right: 10rpx;
						color: #999999;
					}

					.userimg {
						width: 80rpx;
						position: absolute;
						left: 0;
						// top: 10rpx;
						height: 80rpx;
						display: flex;
					}

					.name {
						width: 100%;
						font-size: 28rpx;
						position: absolute;
						left: 90rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 0 0 10rpx 0;
					}

					.priceone {
						position: absolute;
						left: 90rpx;
						top: 30rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 24rpx 0;
					}



				}

			}

			.o-part {
				// display: flex;
				width: 75%;
				margin-left: 25%;
				padding: 0;

				.price2 {
					font-size: 24rpx;
					// font-weight: 400;
					line-height: 30rpx;
					color: #666666;
					text-align: end;
					width: 100%;
					display: block;
					margin-top: 20rpx;
					margin-right: 30rpx;
				}

				.item-box {
					height: 80rpx;
					position: relative;
					width: 100%;
					margin-top: 30rpx;

					.count {
						position: absolute;
						bottom: 0;
						right: 10rpx;
						color: #999999;
					}


					.name {
						font-size: 28rpx;
						position: absolute;
						left: 10rpx;
						width: 100%;
						font-weight: 400;
						line-height: 34rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 0 0 10rpx 0;
					}

					.priceone {
						position: absolute;
						left: 10rpx;
						top: 30rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 22rpx;
						color: #666666;
						display: block;
						padding: 0 0 0 24rpx;
						margin: 24rpx 0;
					}
				}

			}


			.user {
				display: flex;
				margin-left: 20rpx;

				.userimg {
					width: 140rpx;
					height: 140rpx;
					display: flex;
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: #666666;
					display: block;
					width: 100%;
					padding: 0 0 0 24rpx;
					margin: 0 0 10rpx 0;

					.startmun {
						font-size: 24rpx;
						color: #FEC860;
						padding: 0 0 0 24rpx;
					}

					.phone {
						// margin-left: 15rpx;
					}

					.starticon {
						width: 17rpx;
						height: 17rpx;
						display: inline-block;
						color: rgba(255, 255, 255, 0);
						background: url(../../static/zyyxsf.png) repeat-x center;
						background-size: contain;
						vertical-align: middle;
						margin: -2px 0 0 6px;

					}

					.starticon2 {
						width: 34rpx;
					}

					.starticon3 {
						width: 51rpx;
					}

					.starticon4 {
						width: 68rpx;
					}

					.starticon5 {
						width: 85rpx;
					}

				}

				.priceone {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 22rpx;
					color: #5490FE;
					display: block;
					padding: 0 0 0 24rpx;
					margin: 24rpx 0;
				}

				.pricetwo {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 22rpx;
					color: #FEC860;
					display: block;
					padding: 0 0 0 24rpx;
				}
			}
		}

		.font32 {
			color: #029E8E;
			font-size: 32rpx;

			text {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 26px;
				color: #FEC860;
				float: right;
			}
		}
	}

	.cell-left {
		width: 25%;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>
